<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
  <head>
    <base href="<%=basePath%>">
	<%@ include file="/base/jsp/include.jsp"%>
	<style type="text/css">
		li {list-style: none;}
		li label {width: 200px;}
		.tree-comment {border:solid 1px #aaa;padding:10px;}
		.comment-button {border: none; width: 100px; height: 40px; margin-top: 10px; background: #27bcf2; color: #FFF; cursor: pointer;}
		.comment-button:hover {background: #053b75;}
		.tree-comment-hide {display: none;}
		textarea {vertical-align: top;}
	</style>
  </head>
  <body>
    <form id="form" method="post">
        <input name="id" class="mini-hidden" />
        <fieldset style="border:solid 1px #aaa;padding:10px;">
            <legend >订单信息</legend>
            <div style="padding:5px;">
            <table class="editor_table">
            	<tr>
                    <td style="width:200px;">订单号：</td>
                    <td style="width:150px;">
                    	<input name="id" id="id" class="mini-textbox" readOnly vtype="maxLength:50" emptyText="请输入书籍"/>
                    </td>
                </tr>
                <tr>
                    <td style="width:200px;">用户名：</td>
                    <td style="width:150px;">
                    	<input name="username" id="username" class="mini-textbox" readOnly vtype="maxLength:100" emptyText="图片id"/>
                    </td>
                </tr>
                <tr>
                    <td style="width:200px;">手机：</td>
                    <td style="width:150px;">
                    	<textarea name="phone" id="phone" class="mini-textarea editor_len" readOnly vtype="maxLength:150" emptyText="请输入描述"></textarea>
                    </td>
                </tr>
                <tr>
                    <td style="width:200px;">地址：</td>
                    <td style="width:150px;">
                    	<textarea name="address" id="address" class="mini-textarea editor_len" readOnly vtype="maxLength:250" emptyText="请输入目录"></textarea>
                    </td>
                </tr>
                <tr>
                    <td style="width:70px;">学校：</td>
                    <td style="width:150px;">
                     <input name="sName" id="sName" readOnly class="mini-textbox editor_len" readOnly vtype="maxLength:50" emptyText="请输入学校"/> 
                    </td>
                </tr>
                <tr>
                    <td style="width:70px;">下单时间：</td>
                    <td style="width:200px;">
                     <input style="width: 160px;" name="createTime" id="createTime" readOnly class="mini-datepicker" format="yyyy-MM-dd HH:mm:ss" value="2014-01-01"/>
                    </td>
                </tr>
            </table>   
         </div>
        </fieldset>
        
        <div id="datagrid1" class="mini-datagrid" style="width:100%;height:auto;" allowResize="true"
        	url="listOrderItem.do"  idField="id">
        	<div property="columns">
            	<div type="indexcolumn" headerAlign="center">序号</div>
            	<div field="bookName" width="120" headerAlign="center" allowSort="true">名称</div>                
            	<div field="bookImg" width="100" allowSort="true" renderer="pictureHandler" align="center" headerAlign="center">图片</div>            
            	<div field="count" width="100" allowSort="true">数量</div>
            	<div field="price" width="100" allowSort="true">单价</div>              
        	</div>
    	</div>    
        
        <div style="text-align:center;padding:10px;">
            <a class="mini-button" onclick="onOk" style="width:60px;margin-right:20px;">确定</a>       
            <a class="mini-button" onclick="onCancel" style="width:60px;">取消</a>       
        </div>        
    </form>

    <script type="text/javascript">
    	var id = '';
        mini.parse();
        var grid = mini.get("datagrid1");
        var form = new mini.Form("form");
        function SaveData() {
			var o = form.getData();
            form.validate();
            if (form.isValid() == false) return;
            var json = mini.encode(o);
            $.ajax({
                url: "saveOrder.do",
                type: 'post',
                data: $.evalJSON(json),
                cache: false,
                success: function (text) {
                	if(text.indexOf('true') > -1){
				    	mini.alert("操作成功");
				    	CloseWindow("save");
				    }else{
				    	mini.alert("操作失败");
				    	CloseWindow();
				    }
                },
                error: function (textStatus, errorThrown) {
                    alert(jqXHR.responseText);
                    CloseWindow();
                }
            });
        }
        
        //标准方法接口定义
        function SetData(data) {
            if (data.action == "edit") {
                //跨页面传递的数据对象，克隆后才可以安全使用
                data = mini.clone(data);
                $.ajax({
                    url: "findByIdOrder.do?id=" + data.id,
                    cache: false,
                    success: function (text) {
                        var o = mini.decode(text);
                        form.setData(o);
                        form.setChanged(false);
                        id = o.id;
                        grid.load({orderid : id});
                    }
                });
            }
        }

        function GetData() {
            var o = form.getData();
            return o;
        }
        function CloseWindow(action) {
            if (action == "cancel" && form.isChanged()) {
                if (confirm("数据被修改了，是否先保存？")) {
                	SaveData();
                	return false;
                }
            }
            if (window.CloseOwnerWindow) return window.CloseOwnerWindow(action);
            else window.close();            
        }
        function onOk(e) {
        	var imgId = mini.get("img").getValue();
        	if(imgId == ""){
        		mini.alert("请上传图片");
        		return ;
        	}
            SaveData();
        }
        function onCancel(e) {
            CloseWindow("cancel");
        }
        
        $('.comment-button').click(function() {
        	var floor = $('.tree-comment-hide').eq(0).clone();
        	floor.attr("class", "tree-comment");
        	var floors = $('.tree-comment');
        	var floorCount = 1;
        	if(floors.length > 0) {
        		var lastFloor = floors.eq(floors.length - 1);
        		floorCount = parseInt(lastFloor.find('.floorCount').text()) + 1;
        	}
        	floor.find('.floorCount').text(floorCount);
        	$(this).before(floor);
        	
        	$('.del-floor-button').click(function() {
        		var parentUl = $(this).parent().parent();
        		parentUl.remove();
        	});
        });
    </script>
  </body>
</html>
